<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<div id="app"></div>
<script>
    /*定义一个构造函数
    function Demo() {
        this.a = 1
        this.b = 2
    }

    // 通过显式原型属性操作原型对象添加一个属性，值为99
    Demo.prototype.x = 99

    //创建一个Demo实例对象
    const res = new Demo()

    console.log(res) // res实例
    console.log(res.__proto__.x)
    console.log(Demo.prototype === res.__proto__)//true
    console.log(Demo.prototype) //显式原型
    console.log(res.__proto__) // 隐式原型*/
    /*
    1.一个重要的内置关系: VueComponent.prototype. proto=== Vue.prototype
    2.为什么要有这个关系: 让组件实例对象 (vc) 可以访问到 Vue原型上的属性、方法。
    * */
</script>
<script src="../JavaScript/vue.js"></script>
<script>
    const School = Vue.extend({
        template:`
        <div class="schoolBox">
            <h1>学校名字：{{schoolName}}</h1>
            <h1>学校地址：{{schoolAddress}}</h1>
        </div>
        `,
        data(){
            return{schoolName:"尚硅谷", schoolAddress:"北京",}

        }
    })

    const vm=new Vue({
        el:"#app",
        template:`
          <div class="app">
          <School></School>
          </div>`
        ,
        // 第二步注册组件
        components:{School}
    })

    console.log(School.prototype.__proto__=== Vue.prototype) //true
</script>
</body>
</html>
